<template>
  <div class="common">
    <div class="common-item" v-for="(item, index) in dataList" :key="index">
      <div class="item-img" @click="toDetail(item.id)">
        <el-image
          style="width: 100%; height: 100%"
          :src="item.cover"
          lazy
        ></el-image>
      </div>
      <div class="item-detail">
        <div class="item-detail-header">
          <div class="header-title">
            <el-tooltip
              effect="dark"
              :content="item.title"
              placement="top-start"
            >
              <span class="header-title-name" @click="toDetail(item.id)">{{
                item.title
              }}</span>
            </el-tooltip>
            <span class="header-title-author">{{
              item.auhnor || item.director
            }}</span>
          </div>
          <div class="header-star">
            <el-rate
              v-model="item.rate"
              style="font-size: 20px"
              disabled
              text-color="#ff9900"
            >
            </el-rate>
          </div>
        </div>
        <div class="item-detail-body">
          <div class="body-text">{{ item.detail }}</div>
          <div class="body-rate">{{ (item.rate * 2).toFixed(1) }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CommonItem",
  data() {
    return {};
  },
  props: {
    dataList: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    toDetail(id) {
      // 生成目标路由的URL
      const route = this.$router.resolve({
        path: this.$route.path + "/detail/" + id,
      });

      // 使用window.open打开新窗口
      window.open(route.href, "_blank");
    },
  },
};
</script>

<style lang="less" scoped>
.common {
  // display: grid;
  // grid-template-columns: repeat(3, 1fr); // 一行放4列
  // gap: 10px; // 每列和每行之间的间隔为10px
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  .common-item {
    padding: 10px;
    margin: 10px;
    width: 31.4%;
    height: 160px;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    // 阴影的偏移量为2px，模糊半径为4px
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
    .item-img {
      width: 25%;
      height: 100%;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .item-detail {
      width: 72%;
      height: 100%;
      .item-detail-header {
        width: 100%;
        height: 20%;
        display: flex;
        justify-content: space-between;
        .header-title {
          width: 50%;
          display: flex;
          align-items: flex-end;
          .header-title-name {
            width: 70%;
            display: inline-block;
            font-size: 20px;
            font-weight: 400;
            letter-spacing: 2px;
            cursor: pointer;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .header-title-author {
            display: inline-block;
            margin-left: 4px;
            font-size: 14px;
            font-weight: 500;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
      .item-detail-body {
        width: 100%;
        height: 80%;
        display: flex;
        justify-content: space-between;
        .body-text {
          width: 78%;
          text-indent: 2em;
          font-size: 12px;
          line-height: 16px;
          // 隐藏溢出的部分
          overflow: hidden;
          // 用省略号（...）表示溢出的文本
          text-overflow: ellipsis;
          // 将文本容器设置为弹性盒子模型，以便更好地控制文本的显示
          display: -webkit-box;
          // 限制文本显示的行数为7行
          -webkit-line-clamp: 7;
          // 设置弹性盒子的方向为垂直方向，使文本垂直排列
          -webkit-box-orient: vertical;
        }
        .body-rate {
          font-size: 32px;
          color: #e09015;
        }
      }
    }
  }
}
// 星级样式设置
/deep/.el-rate__icon {
  font-size: 24px;
  margin-right: 0px;
}
</style>